<!--
 * @Author: your name
 * @Date: 2021-12-07 17:28:55
 * @LastEditTime: 2021-12-14 14:40:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \web\项目\vuetest\echartsWorld\plugin\index.vue
-->
<template>
	<div class="echartsWorld" v-loading="fullscreenLoading">
		<div class="echartsTitltContent">
			<div class="gzb-yycxtz">
				<a
					class="nav_a"
					target="_blank"
					href="https://ltna1.cloudcc.com/#/homePageObject/standardPage?toAPP=ace202192856EC84ozWk"
					style="background: #fde4e4"
				>
					<img
						class="nvaImg"
						src="https://k8smt01.cloudcc.com/staticResource.action?m=getResource&resourceId=16393688152207SjwoARL"
						alt="项目信息管理"
					/>项目信息管理
				</a>
				<a
					class="nav_a"
					target="_blank"
					href="https://ltna1.cloudcc.com/#/homePageObject/standardPage?toAPP=ace20217504F618Jt9GR"
					style="background: #e4f8fd"
				>
					<img
						class="nvaImg"
						src="https://k8smt01.cloudcc.com/staticResource.action?m=getResource&resourceId=1639368839168R5bIuoiP"
						alt="知识库"
					/>知识库
				</a>
				<a
					class="nav_a"
					target="_blank"
					href="https://ltna1.cloudcc.com/#/homePageObject/standardPage?toAPP=ace20210FE6908Fts461"
					style="background: #f8fde4"
				>
					<img
						class="nvaImg"
						src="https://k8smt01.cloudcc.com/staticResource.action?m=getResource&resourceId=1639368855137BWYTQ40g"
						alt="数据分析"
					/>数据分析
				</a>
			</div>
			<div class="titleLeftSwiper"></div>
		</div>
		<ul>
			<li>
				<el-tabs v-model="activeName" type="card" @tab-click="getGjData">
					<el-tab-pane label="国家风险地图" name="gjfx"></el-tab-pane>
					<el-tab-pane label="主权信用风险地图" name="zqxyfx"></el-tab-pane>
					<el-tab-pane label="项目数量地图" name="xmsl"></el-tab-pane>
				</el-tabs>

				<div
					id="main"
					style="
						width: 100%;
						height: 460px;
						border: 1px solid #ccc;
						border-bottom-left-radius: 5px;
						border-bottom-right-radius: 5px;
						box-shadow: 1px 1px 4px 0 #888888;
					"
				></div>
			</li>
			<li>
				<div class="echartsWorldLeftList">
					<div>
						<span>国家</span>
						<span class="echartsWorldTitle country">{{ country.name }}</span>
					</div>
					<div>
						<span>数据更新时间</span>
						<span class="echartsWorldTitle">{{ objData.dataUpdateDate }}</span>
					</div>
					<div>
						<span>国家风险水平</span>
						<span
							class="echartsWorldTitle"
							:style="'color:' + color[objData.RiskLevel]"
							>{{ riskLiv[objData.RiskLevel] }}</span
						>
					</div>
					<div>
						<span>主权信用风险水平</span>
						<span
							class="echartsWorldTitle"
							:style="'color:' + color[objData.CreditLevel]"
							>{{ riskLiv[objData.CreditLevel] }}</span
						>
					</div>
				</div>
			</li>

			<li>
				<div class="echartsWorldLeftList">
					<div>
						<span>总投金额</span>
						<div class="echartsListBody">
							<span class="echartsWorldTitle">{{
								formatMany(objData.investment)
							}}</span>
						</div>
					</div>
				</div>
				<div class="echartsWorldLeftList">
					<div>
						<span>国别项目新增数</span>
						<div class="echartsListBody">
							<span class="echartsWorldTitle">{{ objData.projectAdd }}</span>
							<span class="echartsWorldRing"
								>({{ objData.projectAddMonth }}/上年度)</span
							>
						</div>
					</div>
					<div>
						<span>国别重点项目数</span>
						<div class="echartsListBody">
							<span class="echartsWorldTitle">{{ objData.keyProject }}</span>
							<span class="echartsWorldRing"
								>({{ objData.keyProjectMonth }}/上年度)</span
							>
						</div>
					</div>
					<div>
						<span>国别立项新增数</span>
						<div class="echartsListBody">
							<span class="echartsWorldTitle">{{
								objData.projectInitiation
							}}</span>
							<span class="echartsWorldRing"
								>({{ objData.projectInitiationMonth }}/上年度)</span
							>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
import axios from '../utils/http'
import nameMap from '../utils/nameMap'
import * as echarts from 'echarts'
// import '../utils/rem'
import '../utils/world'
export default {
	name: 'echarts-world1.2',
	props: {
		elePropObj: {
			type: Object,
			default: () => ({}),
		},
		eleEventObj: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {
			fullscreenLoading: false,
			componentInfo: {
				component: 'echarts-world1.2',
				compName: '世界地图数据1.2',
				icon: '#icon-anniu',
				sort: 1,
				bizType: '自定义组件',
				compDesc: '世界地图数据',
				/* 组件分类：
				 * public: 公开组件（其他组织可见）
				 * private：私有组件（自己组织可见）
				 * beta：组件测试版本
				 */
				category: 'private', // public  private
			},
			style: {
				unit: 'px',
				width: 1300,
				height: 800,
				top: 20,
				left: 20,
				rotate: 0,
				opacity: 1,
			},
			styleOption: {
				unit: {
					lable: '单位',
					type: 'option',
					options: [
						{
							value: 'px',
							label: '像素',
						},
						{
							value: '%',
							label: '百分比',
						},
						{
							value: 'hw',
							label: '视口',
						},
					],
				},
				width: {
					lable: '宽',
					type: 'input',
					inputType: 'number',
				},
				height: {
					lable: '高',
					type: 'input',
					inputType: 'number',
				},
				top: {
					lable: 'y 坐标',
					type: 'input',
					inputType: 'number',
				},
				left: {
					lable: 'x 坐标',
					type: 'input',
					inputType: 'number',
				},
			},
			propObj: {
				id: '',
				pageApi: 'createPage',
				defaultValue: '按钮-dev',
				type: 'primary',
				fontSize: 16,
				functionContent: `function test(conext,value) {
            let requestParams = {
              className: "TestUpdate", // 类名 string
              methodName: "queryGao", // 方法名 string
              params: [], // 请求参数
            };
            return requestParams;
        }`,
				functionfht: `function testfht(self) {

        }`,
				handleComponentId: '',
				axiosAddres: 'https://apigw-a1.cloudcc.com/api/openCall/common',
				className: '',
			},
			propOption: {
				className: {
					lable: "tailwind样式，'cc-'开头,多个空格隔开",
					type: 'input',
				},
				defaultValue: {
					lable: '默认值',
					type: 'defaultValueInput',
				},
				type: {
					lable: '主题',
					type: 'option',
					options: [
						{
							value: 'primary',
							label: 'primary',
						},
						{
							value: 'success',
							label: 'success',
						},
						{
							value: 'info',
							label: 'info',
						},
						{
							value: 'warning',
							label: 'warning',
						},
						{
							value: 'danger',
							label: 'danger',
						},
					],
				},
				fontSize: {
					lable: '字号',
					type: 'input',
					inputType: 'number',
				},
				handleComponentId: {
					lable: '组件ID,使用英文逗号分隔',
					type: 'input',
				},
				functionContent: {
					lable: '方法体',
					type: 'code',
				},
				axiosAddres: {
					lable: '网络请求地址',
					type: 'code',
				},
				functionfht: {
					lable: '返回体',
					type: 'code',
				},
			},
			events: {
				myCreated: `function created(self) {
           // self即this,本组件的vue实例
          }`,
				myMounted: `function mounted(self) {
           // self即this,本组件的vue实例
          }`,
				myDestroyed: `function destroyed(self) {
           // self即this,本组件的vue实例
          }`,
				myMouseover: `function myMouseover(self) {
           // self即this,本组件的vue实例
          }`,
			},
			eventsOption: {
				myCreated: {
					lable: '创建：',
					type: 'code',
				},
				myMounted: {
					lable: '显示：',
					type: 'code',
				},
				myDestroyed: {
					lable: '销毁：',
					type: 'code',
				},
				myMouseover: {
					lable: '鼠标移入：',
					type: 'code',
				},
			},
			animations: [],
			groupStyle: {},
			isLock: false,
			// 请求回来的数据
			resData: [],
			// echarts中英映射
			nameMap,
			// echarts 数据
			echartsData: [],
			objData: {
				RiskLevel: 9, // 国家风险水平  ***********
				CreditLevel: 9, // 信用等级    ***********
				investment: 0, //投资金额  —  根据国家，查询归集库 并汇总 预计总投（美金）
				projectAdd: '0', //新增项目  —— 0 ； 50 ；  (50 - 0) /  50 = 1
				projectAddMonth: '0', //环比
				keyProject: '0', //重点项目
				keyProjectMonth: '0', //环比
				projectInitiation: '0', //立项项目
				projectInitiationMonth: '0', // 环比,
				dataUpdateDate: '0', //   ***********
			},
			// 项目数据
			country: {},
			color: [
				'grey',
				'#BC0002',
				'#FF0003',
				'#EB6003',
				'#F59504',
				'#FCC804',
				'#FFF106',
				'#D1DC00',
				'#8EC21D',
				'#009B44',
			],
			riskLiv: [
				'出现风险情况',
				'最高',
				'很高',
				'较高',
				'中等偏高',
				'中等',
				'中等偏低',
				'较低',
				'很低',
				'最低',
			],
			url: [],
			// 当前地图
			activeName: 'gjfx',
			ifAxios: false,
			myChart: '',
		}
	},
	created() {},
	mounted() {
		this.myChart = echarts.init(document.getElementById('main'))
		this.url = this.elePropObj.axiosAddres
		//接受地址并处理
		this.getGjData()
	},
	destroyed() {},
	methods: {
		// 获取国家数据
		async getGjData() {
			if (this.ifAxios) return
			this.ifAxios = true
			let test = eval('(false || ' + this.elePropObj.functionContent + ')')
			let funContent = test()
			let _this = this
			funContent.className = 'GlobaMapCtrl'
			funContent.methodName = 'getMapRisk'
			funContent.params = [
				{
					argType: 'java.lang.String',
					argValue: this.activeName,
				},
			]
			this.fullscreenLoading = true
			await axios
				.postLight(_this.url, funContent)
				.then(
					(res) => {
						_this.fullscreenLoading = false
						_this.ifAxios = false

						_this.echartsData = res.data.msg
						_this.echartsData[0].selected = true
						_this.country = _this.echartsData[0]

						// 请求数据

						// 生成echarts
						_this.generateEcharts()

						_this.getGjObj()
					},
					(err) => {
						_this.ifAxios = false
						_this.fullscreenLoading = false
						_this.$message({
							message: err,
							type: 'error',
						})
					}
				)
				.catch((error) => {
					_this.ifAxios = false
					_this.fullscreenLoading = false
					_this.$message({
						message: error,
						type: 'error',
					})
				})
		},

		// 获取国家项目
		async getGjObj() {
			if (this.ifAxios) return
			this.ifAxios = true
			let test = eval('(false || ' + this.elePropObj.functionContent + ')')
			let funContent = test()
			let _this = this
			funContent.className = 'GlobaMapCtrl'
			funContent.methodName = 'getProjectData'
			funContent.params = [
				{
					argType: 'java.lang.String',
					argValue: this.country.id,
				},
			]
			await axios
				.postLight(_this.url, funContent)
				.then(
					(res) => {
						_this.ifAxios = false
						_this.fullscreenLoading = false

						console.log(res)
						_this.objData = res.data.msg[0]
					},
					(err) => {
						_this.ifAxios = false
						_this.fullscreenLoading = false
						_this.$message({
							message: err,
							type: 'error',
						})
					}
				)
				.catch((error) => {
					_this.ifAxios = false
					_this.fullscreenLoading = false
					_this.$message({
						message: error,
						type: 'error',
					})
				})
		},

		myMouseover() {
			let mouseoverEvent = eval(
				'(false || ' + this.eleEventObj.myMouseover + ')'
			)
			mouseoverEvent(this)
		},
		/**
		 * 网络请求
		 */
		// echarts
		generateEcharts() {
			let _this = this
			let { myChart } = this
			myChart.clear()
			let option = {
				title: {
					sublink: 'http://esa.un.org/wpp/Excel-Data/population.htm',
					left: 'center',
					top: 'top',
				},
				visualMap: {
					min: 0,
					max: 9,
					text: _this.activeName == 'xmsl' ? [9, 1] : ['高风险', '低风险'],
					realtime: false,
					calculable: false,
					color: this.color,
					itemWidth: 15,
					itemHeight: 300,
					textStyle: {
						fontSize: 18,
					},
				},
				series: [
					{
						name: 'World Population (2010)',
						type: 'map',
						mapType: 'world',
						roam: true,
						itemStyle: {
							emphasis: { label: { show: true } },
						},
						nameMap,
						data: this.echartsData,
					},
				],
				textStyle: {
					fontSize: 18,
				},
			}
			myChart.setOption(option)

			myChart.on('click', async function (params) {
				if (params.data.id) {
					_this.country = params.data
					_this.getGjObj()
				}
			})
		},

		// 金额处理
		formatMany: function (value) {
			const newValue = ['', '', '']
			let fr = 1000
			let num = 3
			let text1 = ''
			let fm = 1
			while (value / fr >= 1) {
				fr *= 10
				num += 1
				// console.log('数字', value / fr, 'num:', num)
			}
			if (num <= 4) {
				// 千
				newValue[0] = parseInt(value / 1000) + ''
				newValue[1] = '千'
			} else if (num <= 8) {
				// 万
				text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
				// tslint:disable-next-line:no-shadowed-variable
				fm = text1 === '万' ? 10000 : 10000000
				if (value % fm === 0) {
					newValue[0] = parseInt(value / fm) + ''
				} else {
					newValue[0] = parseFloat(value / fm).toFixed(2) + ''
				}
				newValue[1] = text1
			} else if (num <= 16) {
				// 亿
				text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
				text1 = (num - 8) / 4 > 1 ? '万亿' : text1
				text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
				// tslint:disable-next-line:no-shadowed-variable
				fm = 1
				if (text1 === '亿') {
					fm = 100000000
				} else if (text1 === '千亿') {
					fm = 100000000000
				} else if (text1 === '万亿') {
					fm = 1000000000000
				} else if (text1 === '千万亿') {
					fm = 1000000000000000
				}
				if (value % fm === 0) {
					newValue[0] = parseInt(value / fm) + ''
				} else {
					newValue[0] = parseFloat(value / fm).toFixed(2) + ''
				}
				newValue[1] = text1
			}
			if (value < 1000) {
				newValue[0] = value + ''
				newValue[1] = ''
			}
			return newValue.join('')
		},
	},
}
</script>
<style>
.gzb-yycxtz {
	display: flex !important;
	width: 100%;
	justify-content: space-between;
}

.gzb-yycxtz .nvaImg {
	margin-left: 6% !important;
	width: 80px !important;
	height: 80px !important;
	margin-right: 20%;
}
.gzb-yycxtz .nav_a {
	display: flex !important;
	align-items: center !important;
	white-space: nowrap !important;
	flex: 30% 1 1 !important;
	text-decoration: none !important;
	color: #666 !important;
	padding: 10px;
	margin: 10px 0;
	font-size: 25px;
}

.gzb-yycxtz .nav_a:nth-child(2) {
	margin: 10px 10px;
}

.echartsWorld {
	padding: 10px;
	overflow: hidden;
}

.echartsWorld * {
	font-size: 14px;
	box-sizing: border-box;
}

.echartsWorld ul {
	list-style: none;
	display: flex;
	padding: 0;
	margin: 0;
	align-items: stretch;
}

.echartsWorld ul > li {
	flex: 20% 0 0;

	padding-top: 30px;
}

.echartsWorld ul > li:nth-child(1) {
	flex: 55% 1 1;
	padding: 0;
}

.echartsWorldTitle,
.echartsWorldRing {
	font-size: 26px;
	font-weight: 600;
	color: #303133;
	text-align: center;
}

.echartsWorldTitle.country {
	font-size: 24px;
	white-space: nowrap;
}

.echartsWorldRing {
	font-size: 16px;
	font-weight: 100;
	white-space: nowrap;
	margin-left: 10px;
}

.padding_30 {
	text-align: center;
	padding-bottom: 20px;
}

.echartsWorldLeftList {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.echartsWorldLeftList > div {
	height: 100px;
	font-size: 30px;
	flex: 100%;
	padding: 10px 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 10px;
	box-shadow: 1px 1px 4px 0 #888888;
	border-radius: 5px;
}

.echartsListBody {
	display: flex;
	align-items: center;
}

.echartsWorldLeftList span {
	flex: 100%;
}

.echartsWorldBottom {
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 20px 10px;
}

.echartsWorldBottom div {
	font-size: 34px;
	font-weight: 600;
	text-align: center;
	flex: 40% 1 1;
	display: flex;
	align-items: center;
}

.bg {
	background: #cee1ed;
}

.echartsWorld .el-tabs__header {
	margin: 0;
}

.echartsWorld .el-tabs--card > .el-tabs__header {
	border: none;
}

.echartsWorld .el-tabs--card > .el-tabs__header .el-tabs__nav {
	border: 1px solid #b6b6b6;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	box-sizing: border-box;
}

.echartsWorld .el-tabs--card > .el-tabs__header .el-tabs__item {
	border-left: 1px solid #b6b6b6;
}

.echartsWorld .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
	border-left: none;
}

.canvas[data-v-149c589f] {
	margin: 0 auto;
}
</style>
